<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { Icons } from "@/constants/images";

import { useExamStore } from "@/store/modules/exam";
import { useRouter } from 'vue-router'
import { storage } from "@/utils/Storage";

import {
    EXAM_CREATE_TIME
} from "@/store/mutation-types";
const props = withDefaults(
    defineProps<{
        isResult: boolean; // 是否是结果页
    }>(),
    {
        isResult: false,
    }
);
const router = useRouter()

const examStore = useExamStore();

const targetTimestamp = ref(0);
const countdown = ref({ hours: 0, minutes: 0, seconds: 0 });
const calculateCountdown = (milliseconds: number) => {
    const seconds = Math.floor(milliseconds / 1000);
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const remainingSeconds = seconds % 60;

    return { hours, minutes, seconds: remainingSeconds };
};
const updateCountdown = () => {
    const currentTime = Date.now();
    const timeDifference = currentTime - targetTimestamp.value;

    if (timeDifference > 0) {
        countdown.value = calculateCountdown(timeDifference);
    } else {
        countdown.value = { hours: 0, minutes: 0, seconds: 0 };
    }
};
// 格式化显示 countdown时间格式为00:00:00
const formatCountdown = () => {
    const { hours, minutes, seconds } = countdown.value;
    const formatNumber = (number: number) => {
        return number < 10 ? `0${number}` : number;
    };
    return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(
        seconds
    )}`;
};
const setDialogVisibleTrue = () => {
    examStore.setDialogVisible(true);
}
onMounted(() => {
    if (examStore.getStartTime) {
        targetTimestamp.value = Number(examStore.getStartTime);
        // 判断当前页面是否 exam-analysis 页面，如果是则不执行定时器
        // setInterval(updateCountdown, 1000);
        updateCountdown();
        if (window.location.pathname.indexOf("exam-analysis") === -1) {
            setInterval(updateCountdown, 1000);
        }
    }
});

const submitAnswer = () => {
    switch (examStore.getPaperType) {
        case '1':
            router.replace("/part2")
            break;
        case '2':
            router.replace("/part3")
            break;
        case '3':
            router.replace("/part4")
            break;
        case '4':
            storage.set(EXAM_CREATE_TIME, formatCountdown())
            router.replace("/exam-result");
            break;
        default:
            break;
    }

}

const isMobile = computed(() => {
    const viewportWidth = document.documentElement.clientWidth;
    return viewportWidth <= 768;
});
</script>

<template>
    <!-- 面包屑 和 进度 -->
    <div class="card head is-flex is-justify-content-space-between is-align-items-center" v-if="!isMobile">
        <div class="is-flex is-align-items-center">
            <!-- breadcrumbs -->
            <nav class="breadcrumb" aria-label="breadcrumbs">
                <ul>
                    <li class="is-active">
                        <span class="icon is-small">
                            <img :src="Icons.ICON_QUESTIONBANK_LOCATION" />
                        </span>
                        <a href="#">
                            <span v-if="!props.isResult">{{ examStore.getQuestionClass.title }}</span>
                            <span v-if="props.isResult">解析</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="progress-box is-flex is-justify-content-space-between is-align-items-center" v-if="!isResult">
                <div class="progress-bar is-flex is-align-items-center">
                    <span class="icon">
                        <img :src="Icons.ICON_QUESTIONBANK_SCHEDULE" />
                    </span>
                    <span>进度：</span>
                    <progress class="progress is-primary is-small" :value="(examStore.getProgress.answerCount /
        examStore.getProgress.totalQuestions) *
        100
        " max="100" />
                    <span>{{ examStore.getProgress.answerCount }} /
                        {{ examStore.getProgress.totalQuestions }}
                    </span>
                </div>
            </div>

        </div>

        <!-- 进度 -->
        <div class="is-flex is-align-items-center" :style="{
        gap: '60px'
    }">
            <div class="is-flex is-align-items-center">
                <span class="icon">
                    <img :src="Icons.ICON_QUESTIONBANK_TIMING" />
                </span>
                <span>用时：</span>
                <span class="red">{{ formatCountdown() }}</span>
            </div>

            <div class="is-flex is-align-items-center" :style="{
        cursor: 'pointer'
    }" :onclick="setDialogVisibleTrue">
                <span class="icon">
                    <img :src="Icons.ICON_ANSWERCARD" />
                </span>
                <span>答题卡</span>
            </div>

            <div class="is-flex is-align-items-center" :style="{
        cursor: 'pointer'
    }" :onclick="submitAnswer">
                <span class="icon">
                    <img :src="Icons.ICON_TIJIAO" />
                </span>
                <span>提交答案</span>
            </div>
        </div>

    </div>

    <div v-if="isMobile" class="mobile-top-box">
        <span>{{ examStore.getQuestionClass.title }}</span>

        <img :onclick="setDialogVisibleTrue" :src="Icons.ICON_ANSWERCARD" />
    </div>
</template>

<style lang="scss" scoped>
@media (max-width: 768px) {
    .mobile-top-box {
        position: relative;
        text-align: center;
        padding: 11px 0;

        span {
            font-size: 18px;
            color: #141623;
            line-height: 22px;
        }

        img {
            position: absolute;
            width: 24px;
            right: 0;
        }
    }
}
</style>
